<template>
  <div class="login-container">
    <div class="login-form-wrapper">
      <div class="login-header">
        <h1 class="logo">CreativeAI Studio</h1>
        <p class="subtitle">🎨 创意内容生成平台</p>
      </div>

      <!-- 用户登录表单 -->
      <div class="auth-form">
        <form @submit.prevent="handleLogin">
          <div class="form-group">
            <label for="username">
              <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
              用户名
            </label>
            <input
              id="username"
              v-model="loginForm.username"
              type="text"
              placeholder="请输入用户名"
              required
              :disabled="loading"
              @focus="$event.target.parentElement.classList.add('focused')"
              @blur="$event.target.parentElement.classList.remove('focused')"
            />
          </div>
          
          <div class="form-group">
            <label for="password">
              <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                <circle cx="12" cy="16" r="1"></circle>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
              </svg>
              密码
            </label>
            <div class="password-input">
              <input
                id="password"
                v-model="loginForm.password"
                :type="showPassword ? 'text' : 'password'"
                placeholder="请输入密码"
                required
                :disabled="loading"
                @focus="$event.target.parentElement.parentElement.classList.add('focused')"
                @blur="$event.target.parentElement.parentElement.classList.remove('focused')"
              />
              <button
                type="button"
                @click="showPassword = !showPassword"
                class="password-toggle"
                :disabled="loading"
              >
                <svg v-if="!showPassword" class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                  <circle cx="12" cy="12" r="3"></circle>
                </svg>
                <svg v-else class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                  <line x1="1" y1="1" x2="23" y2="23"></line>
                </svg>
              </button>
            </div>
          </div>
          
          <div class="form-options">
            <label class="checkbox-label">
              <input v-model="loginForm.rememberMe" type="checkbox" :disabled="loading">
              <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
              </svg>
              记住我
            </label>
          </div>
          
          <button type="submit" class="submit-button" :disabled="loading">
            <span v-if="loading" class="loading-spinner"></span>
            <svg v-else class="icon login-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
              <polyline points="10,17 15,12 10,7"></polyline>
              <line x1="15" y1="12" x2="3" y2="12"></line>
            </svg>
            {{ loading ? '登录中...' : '开始创作之旅' }}
          </button>
        </form>
      </div>

    </div>

    <!-- 人文插画侧栏 -->
    <aside class="login-illustration" aria-hidden="true">
      <div class="illustration-content">
        <!-- 使用SVG插画 -->
        <svg class="welcome-illustration" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
          <!-- 温暖的背景圆圈 -->
          <circle cx="200" cy="150" r="120" fill="#fef3e7" opacity="0.8"/>
          <circle cx="180" cy="130" r="80" fill="#e0f2fe" opacity="0.6"/>
          
          <!-- 人物剪影 -->
          <g transform="translate(160, 80)">
            <!-- 头部 -->
            <circle cx="20" cy="25" r="15" fill="#8b7355"/>
            <!-- 身体 -->
            <ellipse cx="20" cy="55" rx="12" ry="20" fill="#6b8db5"/>
            <!-- 手臂 -->
            <ellipse cx="10" cy="45" rx="3" ry="12" fill="#8b7355" transform="rotate(-20)"/>
            <ellipse cx="30" cy="45" rx="3" ry="12" fill="#8b7355" transform="rotate(20)"/>
            <!-- 腿部 -->
            <ellipse cx="15" cy="80" rx="3" ry="15" fill="#4a5568"/>
            <ellipse cx="25" cy="80" rx="3" ry="15" fill="#4a5568"/>
          </g>
          
          <!-- 创意元素 -->
          <g transform="translate(100, 50)" opacity="0.7">
            <!-- 画笔 -->
            <line x1="10" y1="10" x2="30" y2="30" stroke="#e74c3c" stroke-width="3" stroke-linecap="round"/>
            <circle cx="32" cy="32" r="3" fill="#e74c3c"/>
          </g>
          
          <g transform="translate(280, 80)" opacity="0.7">
            <!-- 音符 -->
            <circle cx="10" cy="15" r="4" fill="#9b59b6"/>
            <line x1="14" y1="15" x2="14" y2="5" stroke="#9b59b6" stroke-width="2"/>
            <path d="M14 5 Q18 3 18 7" stroke="#9b59b6" stroke-width="2" fill="none"/>
          </g>
          
          <!-- 装饰性植物 -->
          <g transform="translate(80, 180)" opacity="0.8">
            <path d="M10 20 Q15 10 20 20" stroke="#27ae60" stroke-width="3" fill="none"/>
            <circle cx="15" cy="15" r="2" fill="#f39c12"/>
            <circle cx="12" cy="12" r="1.5" fill="#e74c3c"/>
          </g>
          
          <g transform="translate(300, 200)" opacity="0.8">
            <path d="M5 15 Q10 5 15 15" stroke="#27ae60" stroke-width="2" fill="none"/>
            <circle cx="10" cy="10" r="1.5" fill="#f39c12"/>
          </g>
        </svg>
        
        <p class="welcome-text">欢迎回来</p>
        <p class="caption">让创意与技术完美融合</p>
      </div>
    </aside>

    <!-- 消息提示 -->
    <div v-if="message" :class="['message', messageType]">
      <span class="message-icon">
        <svg v-if="messageType === 'success'" class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
          <polyline points="22,4 12,14.01 9,11.01"></polyline>
        </svg>
        <svg v-else-if="messageType === 'error'" class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="15" y1="9" x2="9" y2="15"></line>
          <line x1="9" y1="9" x2="15" y2="15"></line>
        </svg>
        <svg v-else class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="16" x2="12" y2="12"></line>
          <line x1="12" y1="8" x2="12.01" y2="8"></line>
        </svg>
      </span>
      {{ message }}
    </div>
  </div>
</template>

<script>
import { authApi } from '@/api'

export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      message: '',
      messageType: 'success',
      showPassword: false,
      loginForm: {
        username: '',
        password: '',
        rememberMe: false
      }
    }
  },
  methods: {

    // 显示消息
    showMessage(msg, type = 'success') {
      this.message = msg
      this.messageType = type
      setTimeout(() => {
        this.message = ''
      }, 3000)
    },

    // 处理用户登录（前端表单提交）
    async handleLogin() {
      if (this.loading) return
  
      // 验证表单
      if (!this.loginForm.username.trim()) {
        this.showMessage('请输入用户名', 'error')
        return
      }
      
      if (!this.loginForm.password.trim()) {
        this.showMessage('请输入密码', 'error')
        return
      }
      
      try {
        this.loading = true
        
        // 调用登录API
        const result = await authApi.login(this.loginForm.username, this.loginForm.password)
        
        if (result.success) {
          this.showMessage('登录成功！正在跳转...', 'success')
          
          // 保存登录状态到本地存储
          localStorage.setItem('isLoggedIn', 'true')
          if (result.user) {
            localStorage.setItem('user', JSON.stringify(result.user))
          }
          
          // 获取重定向URL（如果有的话）
          const urlParams = new URLSearchParams(window.location.search)
          const redirectUrl = urlParams.get('redirect') || '/'
          
          // 登录成功后跳转到指定页面或首页
          setTimeout(() => {
            this.$router.push(redirectUrl)
          }, 1000)
        }
        
      } catch (error) {
        console.error('登录错误:', error)
        this.showMessage(error.message || '登录失败，请检查用户名和密码', 'error')
      } finally {
        this.loading = false
      }
    },

    // 处理注册
    async handleRegister() {
      if (this.loading) return
      
      try {
        this.loading = true
        
        this.showMessage('请联系管理员进行用户注册', 'info')
        
      } catch (error) {
        this.showMessage('注册功能暂时不可用', 'error')
      } finally {
        this.loading = false
      }
    },

    // 处理第三方登录
    async handleSocialLogin(provider) {
      try {
        this.loading = true
        
        // 模拟第三方登录
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        this.showMessage(`${provider}登录功能即将上线`, 'info')
        
      } catch (error) {
        this.showMessage('第三方登录失败', 'error')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style>
.login-container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 420px);
  gap: 48px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  
  /* 人文纸张纹理背景 */
  background-color: #faf8f5;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23e2d5c7' stroke-width='1'%3E%3Cpath d='M0 20L40 20M20 0L20 40'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23f0ebe2' stroke-width='0.5'%3E%3Cpath d='M30 0v60M0 30h60'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 40px 40px, 60px 60px;
  background-position: 0 0, 20px 20px;
}

/* 柔和的手工色彩点缀 */
.login-container::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(245, 190, 150, 0.25) 0%,
    rgba(245, 190, 150, 0.1) 50%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(20px);
}

.login-container::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 250px;
  height: 250px;
  background: radial-gradient(
    circle,
    rgba(163, 196, 188, 0.25) 0%,
    rgba(163, 196, 188, 0.1) 50%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(20px);
}

.login-form-wrapper {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 48px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.08),
    0 5px 15px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(139, 115, 85, 0.1);
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.3);
  /* 更细微的纸张质感 */
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(139, 115, 85, 0.03) 1px, transparent 0),
    linear-gradient(45deg, rgba(139, 115, 85, 0.01) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(139, 115, 85, 0.01) 25%, transparent 25%);
  background-size: 20px 20px, 40px 40px, 40px 40px;
}

/* 添加细微的装饰性边框 */
.login-form-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(139, 115, 85, 0.05) 0%, 
    transparent 20%, 
    transparent 80%, 
    rgba(139, 115, 85, 0.05) 100%);
  border-radius: 24px;
  pointer-events: none;
}

/* 内部阴影装饰 */
.login-form-wrapper::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: linear-gradient(145deg, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(255, 255, 255, 0.7) 100%);
  border-radius: 22px;
  pointer-events: none;
  z-index: -1;
}

.login-header {
  text-align: center;
  margin-bottom: 36px;
}

.logo {
  font-size: 28px;
  font-weight: 700;
  color: #2f3e46;
  margin-bottom: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Microsoft YaHei", sans-serif;
  letter-spacing: -0.5px;
  position: relative;
}

/* 手绘风格下划线 */
.logo::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: #8b7355;
  border-radius: 1px;
  opacity: 0.6;
}

.subtitle {
  color: #6b7280;
  font-size: 15px;
  margin: 0;
  font-weight: 400;
  line-height: 1.4;
}

.auth-form {
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 24px;
  position: relative;
  transition: transform 0.2s ease;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 500;
  color: #374151;
  font-size: 14px;
  transition: all 0.3s ease;
  padding-left: 4px;
}

.icon {
  flex-shrink: 0;
  color: #8b7355;
  transition: color 0.3s ease;
}

.form-group input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  background: #f8f6f3;
  font-family: inherit;
  color: #1f2937;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
}

.form-group input::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.form-group input:focus {
  outline: none;
  border-color: #8b7355;
  background: #ffffff;
  box-shadow: 
    0 0 0 3px rgba(139, 115, 85, 0.1),
    inset 0 2px 4px rgba(139, 115, 85, 0.08),
    0 4px 12px rgba(139, 115, 85, 0.15);
  transform: translateY(-1px);
}

.form-group input:focus + label,
.form-group.focused label {
  color: #8b7355;
  transform: translateY(-1px);
}

.form-group input:focus + label .icon,
.form-group.focused label .icon {
  color: #6b5b42;
  transform: scale(1.05);
}

.form-group.focused {
  transform: translateY(-1px);
}

/* 输入框的手绘边框效果 */
.form-group input:hover {
  border-color: rgba(139, 115, 85, 0.3);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 8px rgba(139, 115, 85, 0.1);
}

.password-input {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(139, 115, 85, 0.1);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.password-toggle:hover {
  background: rgba(139, 115, 85, 0.2);
  transform: translateY(-50%) scale(1.05);
}

.password-toggle .icon {
  color: #8b7355;
  transition: all 0.3s ease;
}

.password-toggle:hover .icon {
  color: #6b5b42;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  font-size: 14px;
  padding: 0 4px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;
  color: #4b5563;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(139, 115, 85, 0.05);
  border: 1px solid transparent;
}

.checkbox-label:hover {
  color: #8b7355;
  background: rgba(139, 115, 85, 0.1);
  border-color: rgba(139, 115, 85, 0.2);
  transform: translateY(-1px);
}

.checkbox-label input {
  margin: 0;
  width: auto;
  transform: scale(1.2);
  accent-color: #8b7355;
  cursor: pointer;
}

.checkbox-label .icon {
  color: #8b7355;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.checkbox-label:hover .icon {
  opacity: 1;
  transform: scale(1.05);
}

.submit-button {
  width: 100%;
  padding: 18px;
  background: linear-gradient(145deg, #2f3e46 0%, #1e2a30 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
  font-family: inherit;
  box-shadow: 
    0 4px 8px rgba(47, 62, 70, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  text-transform: none;
}

.submit-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.submit-button:hover:not(:disabled) {
  background: linear-gradient(145deg, #1e2a30 0%, #2f3e46 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(47, 62, 70, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.submit-button:hover:not(:disabled)::before {
  transform: translateX(100%);
}

.submit-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 
    0 2px 8px rgba(47, 62, 70, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.submit-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* 按钮内部的装饰性线条 */
.submit-button::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 115, 85, 0.3), transparent);
  border-radius: 1px;
}

.login-icon {
  animation: gentle-pulse 3s ease-in-out infinite;
}

@keyframes gentle-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 人文插画侧栏 */
.login-illustration {
  align-self: center;
  text-align: center;
  opacity: 0.95;
  z-index: 5;
}

.illustration-content {
  padding: 20px;
}

.welcome-illustration {
  max-width: 320px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.08));
  margin-bottom: 20px;
}

.welcome-text {
  font-size: 24px;
  font-weight: 600;
  color: #2f3e46;
  margin: 16px 0 8px 0;
  font-family: inherit;
}

.caption {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}

/* 消息提示 */
.message {
  position: fixed;
  top: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: 10px;
  color: white;
  font-weight: 500;
  z-index: 1001;
  animation: messageSlide 0.4s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 300px;
}

.message-icon {
  display: flex;
  align-items: center;
  animation: gentle-bounce 0.6s ease-out;
}

@keyframes gentle-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  60% { transform: translateY(-2px); }
}

.message.success {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.message.error {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.message.info {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

@keyframes messageSlide {
  from {
    transform: translateX(100%) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 980px) {
  .login-container {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 16px;
  }
  
  .login-illustration {
    display: none;
  }
}

@media (max-width: 480px) {
  .login-form-wrapper {
    padding: 28px 24px;
    border-radius: 16px;
  }
  
  .logo {
    font-size: 24px;
  }
  
  .form-group input {
    padding: 12px 14px;
    font-size: 16px;
  }
  
  .submit-button {
    padding: 14px;
    font-size: 15px;
  }
  
  .message {
    top: 16px;
    right: 16px;
    left: 16px;
    text-align: center;
  }
}
</style>